<!--<template>-->
<!--  <div :class="className" :style="{ height: height, width: width }" />-->
<!--</template>-->

<!--<script>-->
<!--import * as echarts from 'echarts';-->
<!--import resize from './mixins/resize'-->
<!--export default {-->
<!--  mixins: [resize],-->
<!--  computed:{-->
<!--  },-->
<!--  props: {-->
<!--    className: {-->
<!--      type: String,-->
<!--      default: 'chart',-->
<!--    },-->
<!--    width: {-->
<!--      type: String,-->
<!--      default: '100%',-->
<!--    },-->
<!--    height: {-->
<!--      type: String,-->
<!--      default: '100%',-->
<!--    },-->
<!--    autoResize: {-->
<!--      type: Boolean,-->
<!--      default: true,-->
<!--    },-->
<!--    chartData:{-->
<!--      type:Object,-->
<!--      default:()=>{}-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      chart: null,-->
<!--      chartColor: {-->
<!--        text:'#215360',-->
<!--        bg:'#ebf6f8',-->
<!--        color:['rgba(0,206,255','rgba(247,79,66','rgba(126,211,33','rgba(255,194,26','rgba(200,110,215','rgba(192,196,204','rgba(84,112,198,1','rgba(238,102,102,1','rgba(115,192,222,1'],-->
<!--        colors:['rgba(0,206,255,1)','rgba(247,79,66,1)','rgba(126,211,33,1)','rgba(255,194,26,1)','rgba(200,110,215,1)','rgba(192,196,204,1)','rgba(84,112,198,1)','rgba(238,102,102,1)','rgba(115,192,222,1)'],-->
<!--        pies:['rgba(0,211,251', 'rgba(69,168,192', 'rgba(179,234,247', 'rgba(247,79,66', 'rgba(137,40,32', 'rgba(224,194,192','rgba(84,112,198,1)','rgba(238,102,102,1)','rgba(115,192,222,1)'],-->
<!--        piesBg:'rgba(249,253,254,0.65)',-->
<!--        party:['#F74F42','#fFC21A','#7ED321','#00CEFF'],-->
<!--        progressColor:['rgba(0,206,255,1)','rgba(247,79,66,1)','rgba(99,183,8,1)','rgba(255,194,26,1)','rgba(200,110,215,1)','rgba(192,196,204,1)','rgba(84,112,198,1)','rgba(238,102,102,1)','rgba(115,192,222,1)'],-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    chartData: {-->
<!--      deep: true,-->
<!--      handler(val) {-->
<!--        this.setOptions(val)-->
<!--      },-->
<!--    },-->
<!--  },-->
<!--  created() {-->
<!--  },-->
<!--  mounted() {-->
<!--    this.$nextTick(() => {-->
<!--      this.initChart()-->
<!--    })-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    if (!this.chart) {-->
<!--      return-->
<!--    }-->
<!--    this.chart.dispose()-->
<!--    this.chart = null-->
<!--  },-->
<!--  methods: {-->
<!--    fontSize(res) {-->
<!--      let docEl = document.documentElement,-->
<!--        clientWidth =-->
<!--          window.innerWidth ||-->
<!--          document.documentElement.clientWidth ||-->
<!--          document.body.clientWidth;-->
<!--      if (!clientWidth) return;-->
<!--      // 此处的 1920 为设计稿的宽度-->
<!--      let fontSize = clientWidth / 1920;-->
<!--      return res * fontSize;-->
<!--    },-->
<!--    initChart() {-->
<!--      this.chart = echarts.init(this.$el);-->
<!--      this.setOptions(this.chartData)-->
<!--    },-->
<!--    setOptions({legend,xAxis,series,color,colorBg,unit}={}) {-->
<!--      let colorData = []-->
<!--      let seriesData = []-->
<!--      for (let i =0;i<series.length;i++){-->
<!--        seriesData.push({-->
<!--          name: legend[i],-->
<!--          type: 'line',-->
<!--          smooth: false,-->
<!--          showSymbol: false,-->
<!--          areaStyle: {-->
<!--            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{-->
<!--              offset: 0,-->
<!--              color: colorBg[i][0]-->
<!--            }, {-->
<!--              offset: 1,-->
<!--              color: colorBg[i][1]-->
<!--            }]),-->
<!--          },-->
<!--          data: series[i]-->
<!--        })-->
<!--      }-->
<!--      let option = {-->
<!--        color:color,-->
<!--        tooltip: {-->
<!--          trigger: 'axis',-->
<!--          axisPointer: {-->
<!--            type: 'shadow'-->
<!--          },-->
<!--          borderColor:'#f2f3f7',-->
<!--          confine: true,-->
<!--          padding: [4, 5], //内边距-->
<!--          textStyle: {-->
<!--            color: '#f2f3f7',-->
<!--            fontWeight: '400',-->
<!--            fontSize:this.fontSize(14),-->
<!--          },-->
<!--        },-->
<!--        grid: {-->
<!--          left: this.fontSize(10),-->
<!--          right: this.fontSize(10),-->
<!--          bottom: this.fontSize(10),-->
<!--          top: this.fontSize(50),-->
<!--          containLabel: true-->
<!--        },-->
<!--        legend: {-->
<!--          data: legend,-->
<!--          right: 0,-->
<!--          top:'0',-->
<!--          textStyle: {-->
<!--            color: '#f2f3f7',-->
<!--            fontWeight: '400',-->
<!--            fontSize:this.fontSize(14),-->
<!--          },-->
<!--          itemWidth: this.fontSize(18),-->
<!--          itemHeight: this.fontSize(12),-->
<!--        },-->
<!--        xAxis: {-->
<!--          type: 'category',-->
<!--          data: xAxis,-->
<!--          axisLine: {-->
<!--            show: true,-->
<!--            lineStyle: {-->
<!--              color: '#CED4DB',-->
<!--            }-->
<!--          },-->
<!--          axisLabel: {-->
<!--            inside: false,-->
<!--            color: '#B3B8BE',-->
<!--            fontWeight: '400',-->
<!--            fontSize:this.fontSize(14),-->
<!--            // formatter: function(params) {-->
<!--            // 	var newParamsName = '' // 最终拼接成的字符串-->
<!--            // 	var paramsNameNumber = params.length // 实际标签的个数-->
<!--            // 	var provideNumber = 5 // 每行能显示的字的个数-->
<!--            // 	var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整-->
<!--            // 	/**-->
<!--            // 	 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签-->
<!--            // 	 */-->
<!--            // 	// 条件等同于rowNumber>1-->
<!--            // 	if (paramsNameNumber > provideNumber) {-->
<!--            // 		/** 循环每一行,p表示行 */-->
<!--            // 		for (var p = 0; p < rowNumber; p++) {-->
<!--            // 			var tempStr = '' // 表示每一次截取的字符串-->
<!--            // 			var start = p * provideNumber // 开始截取的位置-->
<!--            // 			var end = start + provideNumber // 结束截取的位置-->
<!--            // 			// 此处特殊处理最后一行的索引值-->
<!--            // 			if (p == rowNumber - 1) {-->
<!--            // 				// 最后一次不换行-->
<!--            // 				tempStr = params.substring(start, paramsNameNumber)-->
<!--            // 			} else {-->
<!--            // 				// 每一次拼接字符串并换行-->
<!--            // 				tempStr = params.substring(start, end) + '\n'-->
<!--            // 			}-->
<!--            // 			newParamsName += tempStr // 最终拼成的字符串-->
<!--            // 		}-->
<!--            // 	} else {-->
<!--            // 		// 将旧标签的值赋给新标签-->
<!--            // 		newParamsName = params-->
<!--            // 	}-->
<!--            // 	//将最终的字符串返回-->
<!--            // 	return newParamsName-->
<!--            // },-->
<!--          },-->
<!--        },-->

<!--        yAxis: [{-->
<!--          type: 'value',-->
<!--          name: unit,-->
<!--          nameTextStyle: {-->
<!--            color: '#f2f3f7',-->
<!--            fontWeight: '400',-->
<!--            fontSize:this.fontSize(14),-->
<!--          },-->
<!--          axisLine: {-->
<!--            show: true,-->
<!--            lineStyle: {-->
<!--              color: '#CED4DB',-->
<!--            }-->
<!--          },-->
<!--          splitLine: {-->
<!--            show: false,-->
<!--            lineStyle: {-->
<!--              color: '#CED4DB',-->
<!--            }-->
<!--          },-->
<!--          axisLabel: {-->
<!--            color: '#B3B8BE',-->
<!--            fontWeight: '400',-->
<!--            fontSize:this.fontSize(14),-->
<!--          },-->
<!--        }-->
<!--        ],-->
<!--        series:seriesData-->
<!--      }-->
<!--      this.chart.setOption(option, true);-->
<!--      let me = this;-->
<!--      // me.chart.off('click') //解决重复触发-->
<!--      // me.chart.on('click',(params)=> {-->
<!--      // 	// console.log(params.name)-->
<!--      // })-->
<!--    },-->
<!--  },-->
<!--}-->
<!--</script>-->
